<template>
  <div>
    <div class="box dashboard">
      <!-- 头部 -->
      <div class="header">
        <div
          class="item"
          v-for="val in headerCard"
          :key="val.id"
          :style="{ backgroundColor: val.color }"
        >
          <i :class="val.icon"></i>
          <div class="right">
            <h1 style="font-size: 25px">{{ val.title }}</h1>
            <span style="font-size: 39px">{{ val.count }}</span>
          </div>
        </div>
      </div>
      <div class="footer">
        <div class="footer-h">
          <h1>以太坊节点检测</h1>

          <el-input v-model="checkNode" placeholder="请输入内容"></el-input>
          <button @click="handleUploadCheckUrl">上传检测</button>
          <!-- <input ref="file" type="file" name="" @change="handleFileUploadk" /> -->

          <el-button type="text" @click="open">点击打开检测报告</el-button>
        </div>
        <div class="footer-f">
          <h1>以太坊节点批量检测</h1>
          <!-- 文件批量上传组件 -->
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </div>
      </div>
    </div>

    <testReport ref="testReport" :visible.sync="testReportVisible"></testReport>
  </div>
</template>

<script>
// import { builtinModules } from 'module';
import testReport from "./testReport";

export default {
  components: {
    testReport,
  },
  data() {
    return {
      headerCard: [
        {
          id: 1,
          color: "#33cabb",
          icon: "el-icon-s-unfold",
          title: "检测总次数",
          count: "200",
        },
        {
          id: 2,
          color: "#f96868",
          icon: "el-icon-s-release",
          title: "异常节点数",
          count: "220",
        },
        {
          id: 3,
          color: "#15c377",
          icon: "el-icon-caret-right",
          title: "历史节点检测次数",
          count: "100",
        },
        {
          id: 4,
          color: "#926dde",
          icon: "el-icon-chat-dot-square",
          title: "信息反馈",
          count: "200",
        },
      ],
      checkNode: "0x",
      testReportVisible: false,
    };
  },
  methods: {
    handleUploadCheckUrl() {
      console.log("----checkNode---", this.checkNode);
      // 请求参数
      const params = {
        url: this.checkNode,
        password: 123123,
      };
      // const params = new FormData()
      // params.append('key', '1111')
      // params.append('aaa', '1111')
      this.$axios.post("/url", params).then((result) => {
        // result => 返回结果
        console.log(result);
        // someing.....
      });
      // this -> 当前组件的实例，例如可以取到data里面的属性，methods里面的方法
      // console.log('----this--外--', this);
      // this.$axios.post('/url', params).then(function(result){
      //   console.log('---this--内', this);
      //   // this -> 不等于上面那个
      //   // result => 返回结果
      //   // this
      //   console.log(result);
      //   // someing.....

      // }).catch(function(result){
      //   console.log('---this--内', this);
      //   // this -> 不等于上面那个
      //   // result => 返回结果
      //   // this
      //   console.log(result);
      //   // someing.....
      // })
    },
    // requet方法
    // requsetDome() {
    //   // 请求参数
    //   const params = {};
    //   // this.$axios === request
    //   this.$axios.post("url", { params }).then((result) => {
    //     // result => 返回结果
    //     console.log(result);
    //   });
    // },

    //弹窗组件方法
    open() {
      this.testReportVisible = true;
      //   this.$alert('检测结果', "标题名称", {
      //     confirmButtonText: "确定",
      //     callback: (action) => {
      //       this.$message({
      //         type: "info",
      //         message: `action: ${action}`,
      //       });
      //     },
      //   });
    },
  },
};
</script>

<style lang="scss">
.dashboard {
  .header {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    align-items: auto;
    align-content: center;
    /* width: 1400px;
  height: 200px; */
    background-color: #f5f6fa;
  }
  .item {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex: 1;
    margin: 15px;
    border-radius: 15px;
    /* width: 300px;
  height: 150px; */
    color: azure;
  }

  i {
    font-size: 60px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 15px;
  }

  .footer {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 1400px;
    height: 580px;
  }
  .footer h1 {
    font-size: 35px;
  }
  .footer input {
    width: 800px;
    height: 50px;
  }
  button {
    display: block;
    margin-top: 15px;
  }
}
</style>

